<template>
  <div class="tree-view-item">
    <div class="level" :class="'level-'+ menu.menuLevel" v-for="menu in menus" :key="menu.menuCode">
        <div class="heading-button cursor-hand" :class="{'selected': menu.selected, 'expand':menu.expanded, 'menu-active': menu.selected && (!menu.subMenuList)}" @click="toggle(menu)">
            <span :class="'level-title-'+ menu.menuLevel">{{menu.menuName}}</span>
            <span class="iconfont icon-nav-arrow ft-12 mr15 icon-right" v-show="menu.subMenuList && menu.subMenuList.length > 0"></span>
        </div>
        <transition name="fade">
        <div class="heading-children" v-show="menu.expanded" v-if="menu.subMenuList">
          <Tree-view-item :menus='menu.subMenuList' v-on="$listeners" v-bind="$attrs"></Tree-view-item>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TreeViewItem',
  props: {
    menus: Array
  },
  data () {
    return {
    }
  },
  created() {
  },
  methods: {
    toggle(menu) {
      menu.expanded = !menu.expanded
      this.$emit('selectItem', menu)
    }
  }
}
</script>
<style lang="less" scoped>
.heading-button {
  display: flex;
  justify-content: space-between;
  transition: background-color 0.2s ease-in-out 0s, color 0.3s ease-in-out 0.1s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.heading-button:hover {
  color: #08AEF9;
  background-color: #EEF5FF;
  cursor: pointer;
}
.heading-children {
  box-sizing: border-box;
  overflow: hidden;
}
.icon-right {
  transform: rotate(-90deg);
}
.expand {
  .icon-right {
    transform: rotate(0deg);
    transition:0.5s;
  }
}

.selected {
  color: #08AEF9;
}
.fade-enter-active {
  transition: all 0.5s ease 0s;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-to {
  height: 0;
}
.level-title-1{
  padding-left:5px;
}
.level-title-2{
  padding-left:15px;
}
.level-title-3{
  padding-left:25px;
}
.level-title-4{
  padding-left:35px;
}
</style>
